<template>
	<view class="container">
		<view class="main-title">请选择您的身份</view>
		<view class="sub-title">让我们为您提供更好的服务</view>
		<view class="role-list">
			<view class="role-card" :class="{active: selected==='sorter'}" @click="selectRole('sorter')">
				<image class="role-img" src="/static/sorter.png" mode="aspectFit" />
				<view class="role-label">我是分拣员</view>
				<view class="radio-outer">
					<view class="radio-inner" v-if="selected==='sorter'"></view>
				</view>
			</view>
			<view class="role-card" :class="{active: selected==='courier'}" @click="selectRole('courier')">
				<image class="role-img" src="/static/send.png" mode="aspectFit" />
				<view class="role-label">我是配送员</view>
				<view class="radio-outer">
					<view class="radio-inner" v-if="selected==='courier'"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selected: ''
			}
		},
		methods: {
			selectRole(role) {
				this.selected = role;
				setTimeout(() => {
					const page = role === 'sorter' ? 'sorterSecond' : 'courierSecond';
					uni.navigateTo({ url: `/pages/second/${page}` });
				}, 200);
			}
		}
	}
</script>

<style>
	.container {
		background: #fff;
		min-height: 100vh;
		padding: 0 0 40px 0;
	}
	.top-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px 24px 0 24px;
	}
	.progress {
		font-size: 18px;
		font-weight: 600;
	}
	.skip {
		color: #bcbcbc;
		font-size: 15px;
	}
	.main-title {
		font-size: 24px;
		font-weight: bold;
		margin: 32px 0 8px 24px;
	}
	.sub-title {
		color: #bcbcbc;
		font-size: 15px;
		margin-left: 24px;
		margin-bottom: 24px;
	}
	.role-list {
		display: flex;
		flex-direction: column;
		gap: 24px;
		margin: 0 16px;
	}
	.role-card {
		display: flex;
		align-items: center;
		background: #f6f8fe;
		border-radius: 16px;
		padding: 18px 24px;
		margin-bottom: 0;
		position: relative;
		border: 2px solid transparent;
		transition: border 0.2s;
	}
	.role-card.active {
		border: 2px solid #007aff;
		background: #eaf3ff;
	}
	.role-img {
		width: 48px;
		height: 48px;
		margin-right: 24px;
	}
	.role-label {
		flex: 1;
		font-size: 20px;
		font-weight: 600;
	}
	.radio-outer {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		border: 2px solid #bcbcbc;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
	}
	.role-card.active .radio-outer {
		border-color: #007aff;
	}
	.radio-inner {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background: #007aff;
	}
</style>
